<template>
	<!-- 进度更新 -->
	<view class="flex-col page">
		<!--  -->
		<view class="flex-col group_8" v-if="list.isExistence==1">
			<view class="flex-col section_2" v-if="undatetype == true">
				<view class="flex-row flex-center">
					<image :src="$IMG_URL+'16557867934145430912.png'" class="image_4" />
					<text class="text_11">更新动态指标</text>
				</view>
				<view class="justify-between group_10">
					<text class="text_12">当前工序</text>
					<view class="flex-row">
						<picker @change="bindPickerChange" class="time-picker-style" :value="index" :range="array">
							<text class="text_13">{{array[index]}}</text>
							<image :src="$IMG_URL+'index/goright.png'" class="image_6 image_7" />
						</picker>

					</view>
				</view>
				<view class="justify-between items-center group_12">
					<text class="text_14">实际工序进度</text>
					<view class="input-progress-bgViw">
						<u--input class="input-progress" placeholder="0" border="none"
							v-model="this.list.completionSchedule" @change="change" inputAlign="center" type="number"
							maxlength="3"></u--input>
						<text class="text_15">%</text>
					</view>
				</view>
				<view class="justify-between items-center group_13">
					<text class="text_16">预计完成时间</text>
					<view class="flex-row group_14">
						<picker mode="date" :value="date" @change="bindDateChange">
							<view class="flex-row">
								<text class="text_17 uni-input">{{date}}</text>
								<view class="display:inline-block">
									<image :src="$IMG_URL+'index/goright.png'" class="image_6 image_7" />
								</view>
							</view>

						</picker>
					</view>
				</view>
				<!-- 当预计完成时间超出总工时会展示并且有延期时间需要填写延期原因的。 -->
				<view class="flex-col group_15" v-if="type == 1">
					<view class="flex-col section_3">
						<view class="justify-between">
							<text class="text_18">总工程完成时间</text>
							<text class="text_19">{{this.listarr.sumCompleteTime}}</text>
						</view>
						<view class="justify-between group_17">
							<text class="text_20">总工时</text>
							<text class="text_21">{{this.listarr.sumHours}}天</text>
						</view>
						<view class="justify-between group_18">
							<text class="text_22">延期时间</text>
							<text class="text_23">{{this.listarr.overdue}}天</text>
						</view>
						<view class="divider">
							<!--*-->
						</view>
						<text class="text_24">延期原因</text>
						<text class="text_25"></text>
						<input type="text" placeholder="请输入延期原因" v-model="replybecause">
					</view>
					<view class="flex-col items-center text-wrapper_4" @click="save"><text class="text_26">保存</text>
					</view>
				</view>
			</view>
			<view class="flex-col section_4">
				<view class="flex-col">
					<view class="flex-row">
						<image :src="$IMG_URL+'16557867934145430912.png'" class="image_4" />
						<text class="text_27">当前动态进度</text>
					</view>
					<view class="group_21">
						<text class="text_28">总计划工期：</text>
						<text class="text_29">{{this.list.planTime}}</text>
					</view>
					<view class="group_22">
						<text class="text_30">施工阶段：</text>
						<text class="text_31">{{this.list.constructionPlanName}}</text>
					</view>
				</view>
				<view class="flex-col group_23">
					<view class="group_24">
						<text class="text_32">当前工序进度：</text>
						<text class="text_33">{{this.list.completionSchedule}}%</text>
					</view>
					<view class="group_25">
						<text class="text_34">预计完成时间：</text>
						<text class="text_35">{{list.actualEndTimeYJ}}</text>
					</view>
					<view class="flex-row group_26">
						<view class="group_27">
							<text class="text_36">已延期：</text>
							<text class="text_37"
								v-if="this.list.delayTime =='' || this.list.delayTime ==null">0个工作日</text>
							<text class="text_37" v-else> {{this.list.delayTime}}个工作日</text>
						</view>
						<text class="text_38" @click="look" v-if="this.list.delayTime !=null">查看原因</text>
					</view>
				</view>
				<view class="group_28">
					<text class="text_39">总计划工期延期至：</text>
					<text class="text_40">{{this.list.actualEndTime}}</text>
				</view>
			</view>
		</view>
		<u-empty style="height: 70vh;" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else>
		</u-empty>
		<view class="flex-col items-center button" v-if="listarr.sumHours" @click="btn"><text
				class="text_41">主材订购、测量、安装时间调整</text></view>



	</view>
</template>

<script>
	export default {
		components: {},
		data() {

			return {
				array: [],
				index: 0,
				ordersId: '',
				list: [],
				date: '',
				listarr: [],
				constructionPlanId: '',
				type: 1,
				replybecause: '',
				undatetype: true
			};
		},

		created() {

			const ordersId = uni.getStorageSync('ordersId');
			if (ordersId) {
				this.ordersId = ordersId;
				this.schedule();
				// console.log(this.ordersId)
			}
			this.getprocedure()
			uni.startPullDownRefresh();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		bindDateChange(e) {
			// 更改预计时间
			this.date = e.detail.value;
			this.$http('other.myprocedureup', {
				constructionPlanId: this.constructionPlanId,
				actualEndTimeYJ: this.date
			}).then(res => {
				if (res.code = 200) {
					this.type = 1;
					this.listarr = res.data;
					this.date = res.data.sumCompleteTime;
				}
			}).catch(err => {
				console.log(err)
			})

		},
		methods: {
			save() {
				let inspectionFrequencyId = uni.getStorageSync('inspectionFrequencyId');
				console.log(inspectionFrequencyId, 'inspectionFrequencyId')
				this.$http('other.mydelayup', {
					constructionPlanId: this.constructionPlanId,
					actualEndTimeYJ: this.date,
					completionSchedule: this.list.completionSchedule,
					sumHours: this.listarr.sumHours,
					overdue: this.listarr.overdue,
					remarks: this.replybecause,
					inspectionName: this.listarr.inspectionName,
					inspectionUrl: this.listarr.inspectionUrl,
					sumCompleteTime: this.listarr.sumCompleteTime,
					inspectionFrequencyId: inspectionFrequencyId
				}).then(res => {
					// console.log(res, '保存按钮')
					if (res.code = 200) {
						this.undatetype = false;
						location.reload();
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
						return;
					}
				})
			},
			change(e) {
				let value = parseInt(e, 10);
				this.list.completionSchedule = value;
				if (value > 100) {
					this.list.completionSchedule = 100;
				}
				if (value <= 0) {
					this.list.completionSchedule = 0;
				}
				if (isNaN(value)) {
					this.list.completionSchedule = 0;
				}
				console.log('当前值为: ' + this.list.completionSchedule);
			},
			bindDateChange(e) {
				this.date = e.detail.value;
				this.$http('other.myprocedureup', {
					constructionPlanId: this.constructionPlanId,
					actualEndTimeYJ: this.date
				}).then(res => {
					console.log(res, '更改预计时间')
					if (res.code = 200) {
						this.type = 1;
						this.listarr = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			btn() {
				uni.navigateTo({
					url: 'pages/foreman/purchase/purchase'
				})
			},
			bindPickerChange(e) {
				this.index = e.detail.value;
				this.$http('other.updatemyconstruc', {
					projectId: 1,
					constructionPlanName: this.index
				}).then(res => {
					console.log(res, '当前工序修改')
					if (res.code = 200) {
						this.list = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			look() {
				uni.navigateTo({
					url: 'pages/foreman/delay/delay?constructionPlanId=' + this.list.constructionPlanId
				})
			},
			schedule() {
				// 进度更新
				const projectId = uni.getStorageSync('projectId');
				this.$http('onsite.schedule', {
					projectId: projectId
				}).then(res => {
					if (res.code = 200) {
						this.list = res.data;
						this.constructionPlanId = res.data.constructionPlanId;
						this.array[0] = this.list.constructionPlanName;
						this.date = this.list.actualEndTimeYJ;
						this.updatemyconstruc();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})


			},
			updatemyconstruc() {
				if (this.list.isExistence != 1) {
					return;
				}
				// 更改预计时间			
				this.$http('other.myprocedureup', {
					constructionPlanId: this.constructionPlanId,
					actualEndTimeYJ: this.date
				}).then(res => {
					if (res.code = 200) {
						this.type = 1;
						this.listarr = res.data;
						this.date = res.data.actualEndTimeYJ;
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			getprocedure() {
				// 查询巡检工序
				this.$http('onsite.getprocedure', {
					projectId: 1
				}).then(res => {
					// console.log(res,'查询巡检工序')

					if (res.code = 200) {
						for (let i = 0; i < res.data.length; i++) {
							this.array[i] = res.data[i].name;
						}
						// console.log(this.array)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.time-picker-style {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.justify-between {
		align-items: center;
	}

	.flex-row {
		align-items: center;
	}

	.image_4 {

		width: 26rpx;
		height: 16rpx;
	}

	.image_6 {
		width: 24rpx;
		height: 26rpx;
	}

	.page {
		padding-bottom: 48rpx;
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
		height: 624rpx;
	}

	.image_3 {
		margin-left: 265rpx;
		margin-top: 14rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	.flex-center {
		display: flex;
		align-items: center;
	}

	.group_8 {
		margin-top: 24rpx;
		/* padding: 0 24rpx; */
	}

	.button {
		margin: 48rpx 32rpx 0;
		padding: 24rpx 0;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.section_1 {
		padding: 55rpx 0 106rpx;
		background-image: url($IMG_URL+'16557871873519927246.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_7 {
		margin-top: -18rpx;
		padding: 0 32rpx;
		position: relative;
	}

	.section_2 {
		padding: 29rpx 22rpx 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_4 {
		margin-top: 20rpx;
		padding: 29rpx 24rpx 35rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_41 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_1 {
		padding: 0 31.5rpx 3.5rpx;
		position: relative;
	}

	.group_2 {
		margin-top: 71.5rpx;
		padding: 0 64rpx;
	}

	.text-wrapper {
		margin-top: 4rpx;
	}

	.text-wrapper_2 {
		margin-top: 4rpx;
	}

	.text-wrapper_3 {
		margin-top: 4rpx;
	}

	.group_10 {
		margin-top: 32rpx;
	}

	.group_12 {
		margin-top: 37rpx;
	}

	.group_13 {
		margin-top: 33rpx;
	}

	.group_15 {
		margin-top: 35rpx;
	}

	.group_23 {
		margin-top: 38rpx;
	}

	.group_28 {
		margin-top: 38rpx;
		align-self: flex-start;
		line-height: 33rpx;
	}

	.image {
		position: absolute;
		left: 31.5rpx;
		bottom: 0;
		width: 21rpx;
		height: 36rpx;
	}

	.text {
		color: #333333;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.group_3 {
		padding-bottom: 24rpx;
		border-bottom: solid 1rpx #ffffff3d;
	}

	.group_5 {
		margin-top: 28rpx;
	}

	.text_4 {
		margin-top: 18rpx;
		align-self: flex-start;
		color: #ffffff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.group_6 {
		margin-top: 22rpx;
	}

	.text_7 {
		margin-left: 8rpx;
		margin-right: 7rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_9 {
		margin-left: 8rpx;
		margin-right: 7rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_10 {
		margin-left: 8rpx;
		margin-right: 7rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_11 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_12 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.input-progress-bgViw {
		display: flex;
		flex-direction: row;
	}

	.input-progress {
		max-width: 90rpx;
		height: 50rpx;
	}

	.text_14 {
	
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	
	}

	.text_15 {
		margin-top: 6rpx;
		margin-left: 10rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		
	}

	.text_16 {
		margin-bottom: 6rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_14 {
		margin-top: 6rpx;
	}

	.section_3 {
		padding: 30rpx 22rpx 121rpx 24rpx;
		background-color: #f6f7f9;
		border-radius: 16rpx;
	}

	.text-wrapper_4 {
		margin-top: 24rpx;
		padding: 15rpx 0;
		align-self: flex-end;
		background-color: #1d6aff;
		border-radius: 28rpx;
		width: 148rpx;
	}

	.group_21 {
		margin-top: 38rpx;
		align-self: flex-start;
		line-height: 33rpx;
	}

	.group_22 {
		margin-top: 38rpx;
		align-self: flex-start;
		line-height: 33rpx;
	}

	.group_24 {
		align-self: flex-start;
		line-height: 33rpx;
	}

	.group_25 {
		margin-top: 39rpx;
		align-self: flex-start;
		line-height: 33rpx;
	}

	.group_26 {
		margin-top: 38rpx;
	}

	.text_39 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_40 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_2 {
		align-self: center;
		width: 26rpx;
		height: 26rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_3 {
		margin-top: 13rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		color: #ffffff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_6 {
		margin-left: 14.5rpx;
		color: #ffffff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_13 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_7 {
		margin-left: 15rpx;

	}

	.text_17 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		// line-height: 33rpx;
	}

	.image_8 {
		margin: 3rpx 0 4rpx 14rpx;
	}

	.group_17 {
		margin-top: 25rpx;
	}

	.group_18 {
		margin-top: 31rpx;
	}

	.divider {
		margin-top: 33rpx;
		background-color: #eeeeee;
		border-radius: 0.5rpx;
		height: 1rpx;
	}

	.text_24 {
		margin-top: 22rpx;
		align-self: flex-start;
		color: #666666;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_25 {
		margin-top: 31rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_26 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_27 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_28 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_29 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_30 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_31 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_32 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_33 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_34 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_35 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_27 {
		line-height: 33rpx;
		height: 33rpx;
	}

	.text_38 {
		margin-left: 37.5rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_1 {
		flex-shrink: 0;
		border-radius: 50%;
		width: 96rpx;
		height: 96rpx;
	}

	.text_1 {
		margin-left: 32rpx;
		margin-top: 19rpx;
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.text_18 {
		margin-bottom: 6rpx;
		color: #666666;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_19 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_20 {
		color: #666666;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_21 {
		margin-right: 3rpx;
		color: #333333;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_22 {
		color: #666666;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_23 {
		margin-right: 3rpx;
		color: #333333;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
	}

	.text_36 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_37 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}
</style>
